<template>
    <div>{{ remainingTime }}</div>
  </template>
   
   <script setup>
  import { ref, onMounted, onUnmounted, computed } from 'vue';
      const props = defineProps({
        totalSeconds: {
          type: Number,
          default: 0
        }
      })
      const remainingSeconds = ref(props.totalSeconds);
      const remainingTime = computed(() => {
        const minutes = Math.floor(remainingSeconds.value / 60);
        const seconds = remainingSeconds.value % 60;
        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      });
   
      const countdown = () => {
        if (remainingSeconds.value > 0) {
          remainingSeconds.value--;
        } else {
          clearInterval(intervalId);
        }
      };
   
      let intervalId = setInterval(countdown, 1000);
   
      onMounted(() => {
        if (remainingSeconds.value > 0) {
          intervalId = setInterval(countdown, 1000);
        }
      });
   
      onUnmounted(() => {
        if (intervalId) {
          clearInterval(intervalId);
        }
      });
  </script>